<template>
	<view>
    <form  @submit="saveUser">
		<view class="line">
			<view class="left">头像</view>
			<view class="right">
        <button open-type="chooseAvatar" class="btnAvatar" @chooseavatar="chooseavatar" >
				<image  class="avatar" :src="formData.avatar"></image>
        </button>
				<view class="arrow"></view>
			</view>
		</view>
		<view class="line">
			<view class="left">昵称</view>
			<view class="right">
				<input type="nickname" name="nickname" :value="formData.nickname" />
				<view class="arrow"></view>
			</view>
		</view>
		<view class="line">
			<view class="left">真实姓名</view>
			<view class="right">
				<input type="text" name="name" :value="formData.name" />
				<view class="arrow"></view>
			</view>
		</view>
		<view class="line">
			<view class="left">手机号码</view>
			<view class="right">
				<input type="text" name="mobile" :value="formData.mobile"/>
				<view class="arrow"></view>
			</view>
		</view>
		<view class="btnLogin">
			<button type="primary" form-type="submit">立即保存</button>
		</view>
    </form>
	</view>
</template>

<script>
  export default {
    data() {
      return {
        // 表单数据
        formData: {}
      };
    },
    onLoad() {
    	this.initData()
    },
    methods: {
      // 获取数据
          async initData(){
              this.formData = await uni.$http.get('/user/profile')
          },
          // 获取到头像信息
          chooseavatar(event){
              //1. 获取到头像临时路径：   event.detail.avatarUrl 获取到头像的临时路径  【临时的，会失效的】
              console.log(event.detail.avatarUrl);
              //2. TODO: 将这个临时路径的图片上传到自己的服务器保存起来，返回自己服务器的保存地址  【保存自己的服务器，永久存在】
              // 没有办法做的，这个项目后端没有提供上传接口。
              // uni.uploadFile() 实现将临时路径的图片资源上传到自己的服务器
              // uniApp中通过uni.uploadFile()来实现上传文件的！
              			/*
          				wx.uploadFile({
          				  url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
          				  filePath: event.detail.avatarUrl , // 临时路径
          				  name: 'file',
          				  formData: {
          					'user': 'test'
          				  },
          				  success (res){
          					// 获取到真实的存储在我们后端服务器上面的地址
          					const data = res.data
          				  }
          				})
          				*/
              // 3. 将头像地址存储到formData里面去
              this.formData.avatar = event.detail.avatarUrl  // 真实工作里面，应该75行回调那里的真实服务器地址。
          },
          // 保存
        async saveUser(event){
                // 发生更新数据
                let res = await uni.$http.post('/user/update',{
                    ...event.detail.value,  // 获取表单数据
                    avatar:this.formData.avatar // 头像加入
                })
                // 更新vuex中
                this.$store.commit('user/setUserInfo',res)
                // 提示成功
                uni.showToast({
                    title:'更新成功',
                    icon:'none'
                })
            }
            }
  }
</script>

<style lang="scss">
.line{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
	line-height: 88rpx;
	padding: 0 30rpx;
	align-items: center;
	.right{
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.arrow{
		border-top: 1px solid #aaa;
		border-right: 1px solid #aaa;
		width: 20rpx;
		height: 20rpx;
		transform: rotateZ(45deg);
	}
	input{
		text-align: right;
		width: 240rpx;
	}
}
.avatar{
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.btnAvatar{
	background-color: #fff;
	width: 100%;
	display: block;
	padding: 0;
	height: 80rpx;
	border: none;
	border-radius: 0;
}
.btnLogin{
	margin:40rpx;
}
</style>
